<template>
  <div class="reg">
    <span>用户注册</span>
    <div class="info">
        <label class="error">{{ error }}</label>
        <span>登录名</span>
        <input type="text" placeholder="请输入登录名" v-model="user.user_name">
        <span>密码</span>
        <input type="text" placeholder="Password" v-model="user.password">
        <span>确定密码</span>
        <input type="text"  v-model="user.repass">
        <span>昵称</span>
        <input type="text"  v-model="user.nick_name">
        <span class="slogin" @click="register" style="cursor: pointer">注册</span>
    </div>
    <span class="reg">已有账号？立即登录</span>
    
    <div>
      <el-dialog title="消息框" :visible.sync="dialogVisible" class="dialog" :before-close="handleClose">
        <span>{{ error }}</span>
        <span slot="fotter" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { register } from '@/apis/UserService';


export default {
  mounted(){
    // 从localStroage中读取登录信息
    let data = localStorage.getItem("logininfo");

    console.log("data::",data)

    if (data!= null){
      data = JSON.parse(data)
      console.log("user_name:",data["user_name"])

      this.username = data["user_name"]
      this.pass = data.password
      this.remember = true
    }
  },
  data(){
    return {
      error : "", //错误信息
      dialogVisible : false,
      user:{
        user_name:'',
        password:'',
        repass:'',
        nick_name:''
      }
    }
  },
  methods: {
    //注册用户
    async register(){
      if("" == this.user.user_name){
        this.error = "用户名不能为空"
        this.dialogVisible = true
        alert("用户名不能为空")
        return ;
      }
      if("" == this.user.pass){
        this.error = "密码不能为空"
          alert("密码不能为空")
          return ;
      }
      if(this.user.repass != this.user.password){
        this.error = "两次密码不一致"
        this.dialogVisible = true
        alert("两次密码不一致");
        return ;
      }
      if("" == this.user.nick_name){
        this.error = "昵称不能为空"
        this.dialogVisible = true
        alert("昵称不能为空") ;
        return ;
      }

      //验证通过
      let result = (await register(this.user)).data
      console.log(result.data)
      this.$router.push("/login")

    },
    // 弹出框的关闭事件
    handleClose(done){
      done()
    }
  }
}
</script>

<style lang="css" scoped>
    .reg{
      width: 100%;
      height: 930px;
      background-image: url(../assets/img/rice.png);
      background-size: cover;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    
      /* 用户注册 */
      > span:nth-child(1){
        font-size: 20px;
        color: white;
      }
      /* 已有账号？立即登录 */
      .reg{
        display: inline-block;
        width: 250px;
        height: 30px;
        font-size: 13px;
        border: 1px solid gainsboro;
        text-align: center;
        line-height: 30px;
        margin-top: 3px;
      }

      .info {
        width: 220px;
        height: 180px;
        background-color: white;
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 600;
        padding: 20px;

      .error{
          color: red;
        }

        >input{
          width: 200px;
          margin-top: 3px;
          margin-bottom: 3px;
          border: 1px solid gainsboro;
          height: 20px;
          align-items: center;
        }

        /* 注册 */
        .slogin{
          display: inline-block;
          width: 220px;
          height: 30px;
          background-color: green;
          border-radius: 5px;
          text-align: center;
          line-height: 20px;
          color: white;
          font-size: 15px;
        }

    }
  }
</style>
